<!-- page.svelte -->
<script lang="ts">
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	import type { FilterOption } from '$lib/components/Data/MultiSelectFilter/types';
	import MultiSelectFilter from '$lib/components/Data/MultiSelectFilter/MultiSelectFilter.svelte';

	// 定义筛选数据
	const bondTypeGroup: FilterOption[] = [
		{ name: '利率债', code: '0', sign: 'noData', description: '2' },
		{ name: '信用债', code: '1', sign: 'noData', description: '1' }
	];

	const bondTypeList: FilterOption[] = [
		{ code: '1', name: '国债', description: '2' },
		{ code: '2', name: '政金债', description: '2' },
		{ code: '3', name: '地方债', description: '2' },
		{ code: '4', name: '铁道', description: '2' },
		{ code: '10', name: '短融', description: '1' },
		{ code: '11', name: '中票', description: '1' },
		{ code: '12', name: '企业债', description: '1' },
		{ code: '13', name: '公司债', description: '1' },
		{ code: '14', name: '金融债', description: '1' },
		{ code: '15', name: 'ABS', description: '1' },
		{ code: '16', name: 'PPN', description: '1' },
		{ code: '17', name: 'NCD', description: '1' },
		{ code: '18', name: '其他', description: '' }
	];

	const isForeverArr: FilterOption[] = [
		{ name: '永续', code: '1' },
		{ name: '非永续', code: '0' },
		{ name: '未知', code: '2', disabled: true }
	];

	const industryArr: FilterOption[] = [
		{ name: '金融', code: '1' },
		{ name: '科技', code: '2' },
		{ name: '制造', code: '3' },
		{ name: '消费', code: '4' },
		{ name: '医药', code: '5' }
	];

	const productTypeArr: FilterOption[] = [
		{ name: '电子产品', code: '0', sign: 'noData', description: '3' },
		{ name: '家用电器', code: '1', sign: 'noData', description: '4' },
		{ code: '101', name: '手机', description: '3' },
		{ code: '102', name: '电脑', description: '3' },
		{ code: '103', name: '平板', description: '3' },
		{ code: '201', name: '冰箱', description: '4' },
		{ code: '202', name: '电视', description: '4' },
		{ code: '203', name: '空调', description: '4' }
	];

	const bondTypeArr: FilterOption[] = [...bondTypeGroup, ...bondTypeList];

	// 单独定义响应式状态
	let selectedForever = $state<string | null>(null);
	let selectedIndustry = $state<string | null>('2,4');
	let selectedProduct = $state<string | null>(null);
	let selectedBondType = $state<string | null>(null);

	// 示例代码1：基础筛选（无分组 + 数据回显）
	const code1 = `<script lang="ts">
    import MultiSelectFilter from '$lib/components/Data/MultiSelectFilter/MultiSelectFilter.svelte';

    interface FilterOption {
        name: string;
        code: string | number | null;
        disabled?: boolean;
    }

    // 基础筛选数据
    const isForeverArr: FilterOption[] = [
        { name: '永续', code: '1' },
        { name: '非永续', code: '0' },
        { name: '未知', code: '2', disabled: true }
    ];
    const industryArr: FilterOption[] = [
        { name: '金融', code: '1' },
        { name: '科技', code: '2' },
        { name: '制造', code: '3' },
        { name: '消费', code: '4' },
        { name: '医药', code: '5' }
    ];

    // 单独定义响应式状态
    let selectedForever = $state<string | null>(null);
	let selectedIndustry = $state<string | null>('2,4');

    // 筛选回调（event.detail 为选中编码数组，null 表示选中全部）
    const handleForeverChange = (e: CustomEvent<string[] | null>) => {
        const value = e.detail;
        selectedForever = value ? value.join(',') : null;
        console.log('是否永续选中值：', selectedForever || '全部');
    };
    const handleIndustryChange = (e: CustomEvent<string[] | null>) => {
        const value = e.detail;
        selectedIndustry = value ? value.join(',') : null;
        console.log('行业选中值：', selectedIndustry || '全部');
    };
<\/script>

<div class="filter-container">
    <div class="type-part">
        <span class="tit-main">是否永续</span>
        <MultiSelectFilter
            multiData={isForeverArr}
            showData={selectedForever}
            title="是否永续"
            onchange={handleForeverChange}
        />
    </div>
    <div class="type-part">
        <span class="tit-main">行业分类</span>
        <MultiSelectFilter
            multiData={industryArr}
            showData={selectedIndustry}
            title="行业分类"
            onchange={handleIndustryChange}
        />
    </div>
</div>

<\style lang="scss" scoped>
    .filter-container {
        .type-part {
            padding-left: 80px;
            position: relative;
            margin-bottom: 10px;
            .tit-main {
                position: absolute;
                left: 0;
                top: 4px;
                font-weight: bold;
                width: 70px;
                text-align: right;
            }
        }
    }
</style>`.trim();;

	// 示例代码2：自定义分组筛选
	const code2 = `<script lang="ts">
    import MultiSelectFilter from '$lib/components/Data/MultiSelectFilter/MultiSelectFilter.svelte';

    interface FilterOption {
        name: string;
        code: string | number | null;
        description?: string;
        sign?: string;
    }

    // 自定义分组筛选数据
    const productTypeArr: FilterOption[] = [
        { name: '电子产品', code: '0', sign: 'noData', description: '3' },
        { name: '家用电器', code: '1', sign: 'noData', description: '4' },
        { code: '101', name: '手机', description: '3' },
        { code: '102', name: '电脑', description: '3' },
        { code: '103', name: '平板', description: '3' },
        { code: '201', name: '冰箱', description: '4' },
        { code: '202', name: '电视', description: '4' },
        { code: '203', name: '空调', description: '4' }
    ];

    // 单独定义响应式状态
    let selectedProduct = $state<string | null>(null);

    // 筛选回调（event.detail 为选中编码数组，null 表示选中全部）
    const handleProductChange = (e: CustomEvent<string[] | null>) => {
        const value = e.detail;
        selectedProduct = value ? value.join(',') : null;
        console.log('产品类型选中值：', selectedProduct || '全部');
    };
<\/script>

<div class="filter-container">
    <div class="type-part">
        <span class="tit-main">产品类型</span>
        <MultiSelectFilter
            multiData={productTypeArr}
            showData={selectedProduct}
            title="产品类型"
            onchange={handleProductChange}
        />
    </div>
</div>

<\style lang="scss" scoped>
    .filter-container {
        .type-part {
            padding-left: 80px;
            position: relative;
            margin-bottom: 10px;
            .tit-main {
                position: absolute;
                left: 0;
                top: 4px;
                font-weight: bold;
                width: 70px;
                text-align: right;
            }
        }
    }
</style>`.trim();

	// 示例代码3：用法实例（带分组 + 禁用选项）
	const code3 = `<script lang="ts">
    import MultiSelectFilter from '$lib/components/Data/MultiSelectFilter/MultiSelectFilter.svelte';

    // 定义选项类型
    interface FilterOption {
        name: string;
        code: string | number | null;
        description?: string;
        sign?: string;
        disabled?: boolean;
    }

    // 分组筛选数据
    const bondTypeGroup: FilterOption[] = [
        { name: '利率债', code: '0', sign: 'noData', description: '2' },
        { name: '信用债', code: '1', sign: 'noData', description: '1' }
    ];

    const bondTypeList: FilterOption[] = [
        { code: '1', name: '国债', description: '2' },
        { code: '2', name: '政金债', description: '2' },
        // 更多债券类型...
    ];

    const bondTypeArr: FilterOption[] = [...bondTypeGroup, ...bondTypeList];

    // 单独定义响应式状态
    let selectedBondType = $state<string | null>(null);

    // 筛选回调（event.detail 为选中编码数组，null 表示选中全部）
    const handleBondTypeChange = (e: CustomEvent<string[] | null>) => {
        const value = e.detail;
        selectedBondType = value ? value.join(',') : null;
        console.log('债券类型选中值：', selectedBondType || '全部');
    };
<\/script>

<div class="filter-container">
    <div class="type-part">
        <span class="tit-main">债券类型</span>
        <MultiSelectFilter
            multiData={bondTypeArr}
            showData={selectedBondType}
            title="债券类型"
            onchange={handleBondTypeChange}
        />
    </div>
</div>

<\style lang="scss" scoped> 
    .filter-container {
        .type-part {
            padding-left: 80px;
            position: relative;
            margin-bottom: 10px;
            .tit-main {
                position: absolute;
                left: 0;
                top: 4px;
                font-weight: bold;
                width: 70px;
                text-align: right;
            }
        }
    }
</style>`.trim();

	// 属性数据（仅保留核心属性）
	const attributesData = [
		{
			id: 1,
			name: 'multiData',
			describe: '筛选选项数据，支持分组、普通选项和禁用状态',
			type: 'FilterOption[]',
			defaulValue: '[]'
		},
		{
			id: 2,
			name: 'title',
			describe: '筛选器标题，用于特殊分组逻辑处理（如债券类型分组）',
			type: 'string',
			defaulValue: "''"
		},
		{
			id: 3,
			name: 'showData',
			describe:
				'已选值（回显用），支持字符串（逗号分隔）、字符串数组、null或undefined；null 表示选中全部',
			type: 'string | string[] | null | undefined',
			defaulValue: 'undefined'
		}
	];

	// 事件数据（仅保留 change 事件）
	const eventsData = [
		{
			id: 1,
			name: 'change',
			describe:
				'选中状态变化时触发，event.detail 为选中的编码数组（null 表示选中"全部"，空数组表示取消所有选中）',
			type: '(event: CustomEvent<string[] | null>) => void'
		}
	];

	// Option类型说明
	const optionTypeData = [
		{
			id: 1,
			name: 'name',
			describe: '选项显示名称',
			type: 'string',
			required: '是',
			defaulValue: '-'
		},
		{
			id: 2,
			name: 'code',
			describe: '选项唯一编码（null仅用于"全部"选项）',
			type: 'string | number | null',
			required: '是',
			defaulValue: '-'
		},
		{
			id: 3,
			name: 'description',
			describe: '分组标识（用于分组选中逻辑，同分组选项需一致）',
			type: 'string',
			required: '否',
			defaulValue: 'undefined'
		},
		{
			id: 4,
			name: 'sign',
			describe: '特殊标记（"noData"表示分组选项，不计入选中结果）',
			type: 'string',
			required: '否',
			defaulValue: 'undefined'
		},
		{
			id: 5,
			name: 'disabled',
			describe: '是否禁用该选项',
			type: 'boolean',
			required: '否',
			defaulValue: 'false'
		}
	];

	// 回调函数（统一通过 change 事件处理，null 表示选中全部）
	const handleBondTypeChange = (e: CustomEvent<string[] | null>) => {
		const value = e.detail;
		selectedBondType = value ? value.join(',') : null;
		console.log('债券类型选中值：', selectedBondType || '全部');
	};

	const handleForeverChange = (e: CustomEvent<string[] | null>) => {
		const value = e.detail;
		selectedForever = value ? value.join(',') : null;
		console.log('是否永续选中值：', selectedForever || '全部');
	};

	const handleIndustryChange = (e: CustomEvent<string[] | null>) => {
		const value = e.detail;
		selectedIndustry = value ? value.join(',') : null;
		console.log('行业选中值：', selectedIndustry || '全部');
	};

	const handleProductChange = (e: CustomEvent<string[] | null>) => {
		const value = e.detail;
		selectedProduct = value ? value.join(',') : null;
		console.log('产品类型选中值：', selectedProduct || '全部');
	};
</script>

<div class="component-container">
	<div class="title">
		<div class="name">MultiSelectFilter 多选筛选器</div>
		<div class="describe">
			支持单选/多选切换、分组筛选、数据回显和禁用状态的多功能筛选组件，通过Ctrl键快速切换多选模式，点击"全部"时通过change事件返回null标识全选状态。
		</div>
	</div>

	<!-- 基础筛选示例 -->
	<div class="subtitle">
		<div class="name">基础筛选（无分组 + 数据回显）</div>
		<div class="describe">
			适用于简单分类筛选场景，支持已选数据回显（字符串或数组格式），切换多选模式后可选中多个选项；点击"全部"时返回null，取消所有选中时返回空数组。
		</div>
	</div>
	<ComponentPreview code={code1}>
		<div class="filter-container">
			<div class="type-part">
				<span class="tit-main">是否永续</span>
				<MultiSelectFilter
					multiData={isForeverArr}
					showData={selectedForever}
					title="是否永续"
					onchange={handleForeverChange}
				/>
			</div>
			<div class="type-part">
				<span class="tit-main">行业分类</span>
				<MultiSelectFilter
					multiData={industryArr}
					showData={selectedIndustry}
					title="行业分类"
					onchange={handleIndustryChange}
				/>
			</div>
		</div>
	</ComponentPreview>

	<!-- 自定义分组筛选示例 -->
	<div class="subtitle">
		<div class="name">自定义分组筛选</div>
		<div class="describe">
			支持自定义分组逻辑，通过&nbsp;&nbsp;<span class="tag">description</span
			>&nbsp;&nbsp;字段标识分组归属，分组选项点击后自动选中同组所有子选项；全选状态统一通过change事件返回null标识。
		</div>
	</div>
	<ComponentPreview code={code2}>
		<div class="filter-container">
			<div class="type-part">
				<span class="tit-main">产品类型</span>
				<MultiSelectFilter
					multiData={productTypeArr}
					showData={selectedProduct}
					title="产品类型"
					onchange={handleProductChange}
				/>
			</div>
		</div>
	</ComponentPreview>

	<!-- 用法实例示例 -->
	<div class="subtitle">
		<div class="name">用法实例（带分组 + 禁用选项）</div>
		<div class="describe">
			支持分组筛选（如债券类型的利率债/信用债分组），点击分组可一键选中该组所有选项；支持禁用特定选项；按住Ctrl键可自由多选，松开则为单选模式；点击"全部"时返回null表示全选。
		</div>
	</div>
	<ComponentPreview code={code3}>
		<div class="filter-container">
			<div class="type-part">
				<span class="tit-main">债券类型</span>
				<!-- 仅传递核心属性，无 onselectall -->
				<MultiSelectFilter
					multiData={bondTypeArr}
					showData={selectedBondType}
					title="债券类型"
					onchange={handleBondTypeChange}
				/>
			</div>
		</div>
	</ComponentPreview>

	<!-- 属性说明 -->
	<div class="subtitle">
		<div class="name">MultiSelectFilter Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={350} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<!-- 事件说明 -->
	<div class="subtitle">
		<div class="name">MultiSelectFilter Events</div>
	</div>
	<Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={350} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>

	<!-- Option类型说明 -->
	<div class="subtitle">
		<div class="name">FilterOption 类型说明</div>
		<div class="describe">multiData 属性接收的选项数据格式规范</div>
	</div>
	<Table data={optionTypeData} border={false} size="lg">
		<TableColumn key="name" title="字段名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={350} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}></TableColumn>
		<TableColumn key="required" title="是否必填" align="left" minWidth={120} />
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
</div>

<style scoped lang="scss">
	.filter-container {
		.type-part {
			padding-left: 80px;
			position: relative;
			margin-bottom: 10px;
			.tit-main {
				position: absolute;
				left: 0;
				top: 4px;
				font-weight: bold;
				width: 70px;
				text-align: right;
			}
		}
	}
</style>
